
<!DOCTYPE html>
<html lang="zh-cn">
    
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="XGHeaven&#39;s Blog">
    <title>归档: 2017 - XGHeaven&#39;s Blog</title>
    <meta name="author" content="XGHeaven">
    
    
    
        <link rel="alternate" type="application/atom+xml" title="RSS" href="/atom.xml">
    
    <meta property="og:type" content="blog">
<meta property="og:title" content="XGHeaven&#39;s Blog">
<meta property="og:url" content="http://blog.xgheaven.cn/archives/2017/index.html">
<meta property="og:site_name" content="XGHeaven&#39;s Blog">
<meta property="og:locale" content="zh-cn">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="XGHeaven&#39;s Blog">
<meta name="twitter:creator" content="@XGHeaven">
    
    
        
    
    
        <meta property="og:image" content="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=640"/>
    
    
    
    
    <!--STYLES-->
    <link rel="stylesheet" href="/assets/css/style-mhhgzztqkaub4zd4cl8bd83f7mgh9j6njnhilft4hamhrjsliqyzwo2cfzdk.min.css">
    <!--STYLES END-->
    
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-71388235-1']);
        _gaq.push(['_trackPageview']);
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

    
    <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?9894361f828b64144ac1f2ac0c58c300";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</head>

    <body>
        <div id="blog">
            <!-- Define author's picture -->


    
        
    

<header id="header" data-behavior="1">
    <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
    <h1 class="header-title">
        <a class="header-title-link" href="/ ">XGHeaven&#39;s Blog</a>
    </h1>
    
        
            <a  class="header-right-picture "
                href="#about">
        
        
            <img class="header-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=90"/>
        
        </a>
    
</header>
            <!-- Define author's picture -->


    

<nav id="sidebar" data-behavior="1">
    
        <div class="sidebar-profile">
            <a href="/#about">
                    <img class="sidebar-profile-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=110"/>
            </a>
            <span class="sidebar-profile-name">XGHeaven</span>
        </div>
    
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/ "
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-home"></i>
                    <span class="sidebar-button-desc">首页</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-categories"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
                    <span class="sidebar-button-desc">分类</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-tags"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
                    <span class="sidebar-button-desc">标签</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/all-archives"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
                    <span class="sidebar-button-desc">归档</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="#about"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-question"></i>
                    <span class="sidebar-button-desc">关于</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/friend-link"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-link"></i>
                    <span class="sidebar-button-desc">友情链接</span>
                </a>
        </li>
        
    </ul>
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://github.com/XGHeaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-github"></i>
                    <span class="sidebar-button-desc">GitHub</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://twitter.com/xgheaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-twitter"></i>
                    <span class="sidebar-button-desc">Twitter</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://facebook.com/xgheaven" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-facebook"></i>
                    <span class="sidebar-button-desc">Facebook</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="https://www.linkedin.com/xgheaven/" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-linkedin"></i>
                    <span class="sidebar-button-desc">LinkedIn</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link " href="mailto:xgheaven@gmail.com" target="_blank">
                
                    <i class="sidebar-button-icon fa fa-lg fa-envelope-o"></i>
                    <span class="sidebar-button-desc">邮箱</span>
                </a>
        </li>
        
    </ul>
    
        <ul class="sidebar-buttons">
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/atom.xml"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
                    <span class="sidebar-button-desc">RSS</span>
                </a>
        </li>
        
            <li class="sidebar-button">
                
                    <a  class="sidebar-button-link "
                         href="/changelog"
                        
                    >
                
                    <i class="sidebar-button-icon fa fa-lg fa-line-chart"></i>
                    <span class="sidebar-button-desc">Changelog</span>
                </a>
        </li>
        
    </ul>
    
</nav>

            
            <div id="main" data-behavior="1"
                 class="
                        hasCoverMetaIn
                        ">
                
    

<section class="postShorten-group main-content-wrap">
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/12/30/Reflect-metadata/">
                            Reflect-Metadata 详解
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Sat Dec 30 2017 22:44:07 GMT+0800">
	
		    12月 30, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Jacascript/">Jacascript</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>在 ES6 的规范当中，就已经存在 <code>Reflect</code> API 了。简单来说这个 API 的作用就是可以实现对变量操作的函数化，也就是反射。具体的关于这个 API 的内容，可以查看这个<a href="http://es6.ruanyifeng.com/#docs/reflect" target="_blank" rel="external">教程</a></p>
<p>然而我们在这里讲到的，却是 <code>Reflect</code> 里面还没有的一个规范，那么就是 <code>Reflect Metadata</code>。</p>
<h2 id="Metadata"><a href="#Metadata" class="headerlink" title="Metadata"></a>Metadata</h2><p>想必对于其他语言的 Coder 来说，比如说 Java 或者 C#，Metadata 是很熟悉的。最简单的莫过于通过反射来获取类属性上面的批注（在 JS 当中，也就是所谓的装饰器）。从而可以更加优雅的对代码进行控制。</p>
<p>而 JS 现在有<a href="https://github.com/tc39/proposal-decorators" target="_blank" rel="external">装饰器</a>，虽然现在还在 <code>Stage2</code> 阶段。但是 JS 的装饰器更多的是存在于对函数或者属性进行一些操作，比如修改他们的值，代理变量，自动绑定 this 等等功能。</p>
<blockquote>
<p>所以，后文当中我就使用 TypeScript 来进行讲解，因为 TypeScript 已经完整的实现了装饰器。<br>虽然 Babel 也可以，但是需要各种配置，人懒，不想配置那么多。</p>
</blockquote>
<p>但是却无法实现通过反射来获取究竟有哪些装饰器添加到这个类/方法上。</p>
<p>于是 <code>Reflect Metadata</code> 应运而生。</p>
<h2 id="Reflect-Metadata"><a href="#Reflect-Metadata" class="headerlink" title="Reflect Metadata"></a>Reflect Metadata</h2><p>Relfect Metadata，简单来说，你可以通过装饰器来给类添加一些自定义的信息。然后通过反射将这些信息提取出来。当然你也可以通过反射来添加这些信息。 就像是下面这个例子所示。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="meta">@Reflect</span>.metadata(<span class="string">'name'</span>, <span class="string">'A'</span>)</div><div class="line"><span class="keyword">class</span> A &#123;</div><div class="line">  <span class="meta">@Reflect</span>.metadata(<span class="string">'hello'</span>, <span class="string">'world'</span>)</div><div class="line">  <span class="keyword">public</span> hello(): <span class="built_in">string</span> &#123;</div><div class="line">    <span class="keyword">return</span> <span class="string">'hello world'</span></div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">Reflect.getMetadata(<span class="string">'name'</span>, A) <span class="comment">// 'A'</span></div><div class="line">Reflect.getMetadata(<span class="string">'hello'</span>, <span class="keyword">new</span> A()) <span class="comment">// 'world'</span></div><div class="line"><span class="comment">// 这里为什么要用 new A()，用 A 不行么？后文会讲到</span></div></pre></td></tr></table></figure>
<p>是不是很简单，那么我简单来介绍一下~</p>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>首先，在这里有四个概念要区分一下：</p>
<ol>
<li><code>Metadata Key</code> {Any} 后文简写 <code>k</code>。元数据的 Key，对于一个对象来说，他可以有很多元数据，每一个元数据都对应有一个 Key。一个很简单的例子就是说，你可以在一个对象上面设置一个叫做 <code>&#39;name&#39;</code> 的 Key 用来设置他的名字，用一个 <code>&#39;created time&#39;</code> 的 Key 来表示他创建的时间。这个 Key 可以是任意类型。在后面会讲到内部本质就是一个 <code>Map</code> 对象。</li>
<li><code>Metadata Value</code> {Any} 后文简写 <code>v</code>。元数据的类型，任意类型都行。</li>
<li><code>Target</code> {Object} 后文简写 <code>o</code>。表示要在这个对象上面添加元数据</li>
<li><code>Property</code> {String|Symbol} 后文简写 <code>p</code>。用于设置在那个属性上面添加元数据。大家可能会想，这个是干什么用的，不是可以在对象上面添加元数据了么？其实不仅仅可以在对象上面添加元数据，甚至还可以在对象的属性上面添加元数据。其实大家可以这样理解，当你给一个对象定义元数据的时候，相当于你是默认指定了 <code>undefined</code> 作为 Property。 下面有一个例子大家可以看一下。</li>
</ol>
<p>大家明白了上面的概念之后，我之前给的那个例子就很简单了~不用我多说了。</p>
<h3 id="安装-使用"><a href="#安装-使用" class="headerlink" title="安装/使用"></a>安装/使用</h3><p>下面不如正题，我们怎么开始使用 <code>Reflect Metadata</code> 呢？<br>首先，你需要安装 <code>reflect-metadata</code> polyfill，然后引入之后就可以看到在 <code>Reflect</code> 对象下面有很多关于 Metadata 的函数了。因为这个还没有进入正式的协议，所以需要安装垫片使用。</p>
<blockquote>
<p>啥，Reflect 是啥，一个全局变量而已。</p>
</blockquote>
<p>你不需要担心这个垫片的质量，因为连 Angular 都在使用呢，你怕啥。</p>
<p>之后你就可以安装我上面写的示例，在 TypeScript 当中去跑了。</p>
<h3 id="类-属性-方法-装饰器"><a href="#类-属性-方法-装饰器" class="headerlink" title="类/属性/方法 装饰器"></a>类/属性/方法 装饰器</h3><p>看这个例子。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="meta">@Reflect</span>.metadata(<span class="string">'name'</span>, <span class="string">'A'</span>)</div><div class="line"><span class="keyword">class</span> A &#123;</div><div class="line">  <span class="meta">@Reflect</span>.metadata(<span class="string">'name'</span>, <span class="string">'hello'</span>)</div><div class="line">  hello() &#123;&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">const</span> objs = [A, <span class="keyword">new</span> A, A.prototype]</div><div class="line"><span class="keyword">const</span> res = objs.map(<span class="function"><span class="params">obj</span> =&gt;</span> [</div><div class="line">  Reflect.getMetadata(<span class="string">'name'</span>, obj),</div><div class="line">  Reflect.getMetadata(<span class="string">'name'</span>, obj, <span class="string">'hello'</span>),</div><div class="line">  Reflect.getOwnMetadata(<span class="string">'name'</span>, obj),</div><div class="line">  Reflect.getOwnMetadata(<span class="string">'name'</span>, obj ,<span class="string">'hello'</span>)</div><div class="line">])</div><div class="line"><span class="comment">// 大家猜测一下 res 的值会是多少？</span></div></pre></td></tr></table></figure>
<blockquote>
<p>想好了么？再给你 10 秒钟</p>
<p>10<br>9<br>8<br>7<br>6<br>5<br>4<br>3<br>2<br>1</p>
</blockquote>
<p>res</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">[</div><div class="line">  [<span class="string">'A'</span>, <span class="literal">undefined</span>, <span class="string">'A'</span>, <span class="literal">undefined</span>],</div><div class="line">  [<span class="literal">undefined</span>, <span class="string">'hello'</span>, <span class="literal">undefined</span>, <span class="literal">undefined</span>],</div><div class="line">  [<span class="literal">undefined</span>, <span class="string">'hello'</span>, <span class="literal">undefined</span>, <span class="string">'hello'</span>],</div><div class="line">]</div></pre></td></tr></table></figure>
<p>那么我来解释一下为什么回是这样的结果。</p>
<p>首先所有的对类的修饰，都是定义在类这个对象上面的，而所有的对类的属性或者方法的修饰，都是定义在类的原型上面的，并且以属性或者方法的 key 作为 property，这也就是为什么 <code>getMetadata</code> 会产生这样的效果了。</p>
<p>那么带 <code>Own</code> 的又是什么情况呢？</p>
<p>这就要从元数据的查找规则开始讲起了</p>
<h3 id="原型链查找"><a href="#原型链查找" class="headerlink" title="原型链查找"></a>原型链查找</h3><p>类似于类的继承，查找元数据的方式也是通过原型链进行的。</p>
<p>就像是上面那个例子，我实例化了一个 <code>new A()</code>，但是我依旧可以找到他原型链上的元数据。</p>
<p>举个例子</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">class</span> A &#123;</div><div class="line">  <span class="meta">@Reflect</span>.metadata(<span class="string">'name'</span>, <span class="string">'hello'</span>)</div><div class="line">  hello() &#123;&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">const</span> t1 = <span class="keyword">new</span> A()</div><div class="line"><span class="keyword">const</span> t2 = <span class="keyword">new</span> A()</div><div class="line">Reflect.defineMetadata(<span class="string">'otherName'</span>, <span class="string">'world'</span>, t2, <span class="string">'hello'</span>)</div><div class="line">Reflect.getMetadata(<span class="string">'name'</span>, t1, <span class="string">'hello'</span>) <span class="comment">// 'hello'</span></div><div class="line">Reflect.getMetadata(<span class="string">'name'</span>, t2, <span class="string">'hello'</span>) <span class="comment">// 'hello'</span></div><div class="line">Reflect.getMetadata(<span class="string">'otherName'</span>, t2, <span class="string">'hello'</span>) <span class="comment">// 'world'</span></div><div class="line"></div><div class="line">Reflect.getOwnMetadata(<span class="string">'name'</span>, t2, <span class="string">'hello'</span>) <span class="comment">// undefined</span></div><div class="line">Reflect.getOwnMetadata(<span class="string">'otherName'</span>, t2, <span class="string">'hello'</span>) <span class="comment">// 'world'</span></div></pre></td></tr></table></figure>
<h3 id="用途"><a href="#用途" class="headerlink" title="用途"></a>用途</h3><p>其实所有的用途都是一个目的，给对象添加额外的信息，但是不影响对象的结构。这一点很重要，当你给对象添加了一个原信息的时候，对象是不会有任何的变化的，不会多 property，也不会有的 property 被修改了。<br>但是可以衍生出很多其他的用途。</p>
<ul>
<li>Anuglar 中对特殊字段进行修饰 (Input)，从而提升代码的可读性。</li>
<li>可以让装饰器拥有真正装饰对象而不改变对象的能力。让对象拥有更多语义上的功能。</li>
</ul>
<h3 id="API"><a href="#API" class="headerlink" title="API"></a>API</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">namespace</span> Reflect &#123;</div><div class="line">  <span class="comment">// 用于装饰器</span></div><div class="line">  metadata(k, v): <span class="function">(<span class="params">target, property?</span>) =&gt;</span> <span class="built_in">void</span></div><div class="line">  </div><div class="line">  <span class="comment">// 在对象上面定义元数据</span></div><div class="line">  defineMetadata(k, v, o, p?): <span class="built_in">void</span></div><div class="line">  </div><div class="line">  <span class="comment">// 是否存在元数据</span></div><div class="line">  hasMetadata(k, o, p?): <span class="built_in">boolean</span></div><div class="line">  hasOwnMetadata(k, o, p?): <span class="built_in">boolean</span></div><div class="line">  </div><div class="line">  <span class="comment">// 获取元数据</span></div><div class="line">  getMetadata(k, o, p?): <span class="built_in">any</span></div><div class="line">  getOwnMetadata(k, o, p?): <span class="built_in">any</span></div><div class="line">  </div><div class="line">  <span class="comment">// 获取所有元数据的 Key</span></div><div class="line">  getMetadataKeys(o, p?): <span class="built_in">any</span>[]</div><div class="line">  getOwnMetadataKeys(o, p?): <span class="built_in">any</span>[]</div><div class="line">  </div><div class="line">  <span class="comment">// 删除元数据</span></div><div class="line">  deleteMetadata(k, o, p?): <span class="built_in">boolean</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<blockquote>
<p>大家可能注意到，针对某些操作，会有 <code>Own</code> 的函数。这是因为有的操作是可以通过原型链进行操作的。这个后文讲解。</p>
</blockquote>
<h2 id="深入-Reflect-Metadata"><a href="#深入-Reflect-Metadata" class="headerlink" title="深入 Reflect Metadata"></a>深入 Reflect Metadata</h2><h3 id="实现原理"><a href="#实现原理" class="headerlink" title="实现原理"></a>实现原理</h3><p>如果你去翻看官网的文档，他会和你说，所有的元数据都是存在于对象下面的 <code>[[Metadata]]</code> 属性下面。一开始我也是这样认为的，新建一个 <code>Symbol(&#39;Metadata&#39;)</code>，然后将元数据放到这个 Symbol 对应的 Property 当中。直到我看了源码才发现并不是这样。请看例子</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="meta">@Reflect</span>.metadata(<span class="string">'name'</span>, <span class="string">'A'</span>)</div><div class="line"><span class="keyword">class</span> A &#123;&#125;</div><div class="line"></div><div class="line"><span class="built_in">Object</span>.getOwnPropertySymbols(A) <span class="comment">// []</span></div></pre></td></tr></table></figure>
<p>哈哈，并没有所谓的 Symbol，那么这些元数据都存在在哪里呢？</p>
<p>其实是内部的一个 WeakMap 中。他正是利用了 WeakMap 不增加引用计数的特点，将对象作为 Key，元数据集合作为 Value，存到 WeakMap 中去。</p>
<p>如果你认真探寻的话，你会发现其内部的数据结构其实是这样的</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">WeakMap&lt;<span class="built_in">any</span>, Map&lt;<span class="built_in">any</span>, Map&lt;<span class="built_in">any</span>, <span class="built_in">any</span>&gt;&gt;&gt;</div></pre></td></tr></table></figure>
<p>是不是超级绕，但是我们从调用的角度来思考，这就一点都不绕了。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">weakMap.get(o).get(p).get(k)</div></pre></td></tr></table></figure>
<p>先根据对象获取，然后在根据属性，最后根据元数据的 Key 获取最终要的数据。</p>
<h2 id="End"><a href="#End" class="headerlink" title="End"></a>End</h2><p>因为 Reflect Metadata 实在是比较简单，这里就不多讲解了。更多内容请查看 <a href="https://rbuckton.github.io/reflect-metadata" target="_blank" rel="external">Spec</a></p>
<h2 id="题外话"><a href="#题外话" class="headerlink" title="题外话"></a>题外话</h2><p>其实看了源码之后还是挺惊讶的，按照一般的套路，很多 polyfill 会让你提供一些前置的 polyfill 之后，当前的 polyfill 才能使用。但是 <code>reflect-metadata</code> 竟然内部自己实现了很多的 polyfill 和算法。比如 Map, Set, WeakMap, UUID。最惊讶的莫过于 WeakMap 了。不是很仔细的阅读了一下，好像还是会增加引用计数。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/12/30/Reflect-metadata/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/08/17/vue-lever-a-plugin-help-you-to-manager-true-false-state/">
                            Vue-Lever 一个使用装饰器模式的插件帮你管理 True/false 状态
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Thu Aug 17 2017 11:01:14 GMT+0800">
	
		    8月 17, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Vue-js/">Vue.js</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <blockquote>
<p>vue-lever 是一个使用装饰器模式的插件来帮你管理 true/false 状态</p>
</blockquote>
<p>最近一直在写 vue 相关的东西，因为毕竟是前端，所以经常会遇到一种情况就是说，我需要维护一个 true/false 状态，比如说：当按钮点击的时候，显示加载字样，然后等加载完毕之后完成显示。</p>
<p>首先我们考虑出现这种情况的时候，如果我们一行一行的书写，那将是非常麻烦的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">    data() &#123;</div><div class="line">        <span class="keyword">return</span> &#123; <span class="attr">loading</span>: <span class="literal">false</span> &#125;</div><div class="line">    &#125;</div><div class="line">    methods: &#123;</div><div class="line">        asyncAction() &#123;</div><div class="line">            <span class="keyword">this</span>.loading = <span class="literal">true</span></div><div class="line">            <span class="keyword">this</span>.$http.doing() <span class="comment">// return a promise</span></div><div class="line">                .then(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.loading = <span class="literal">false</span>)</div><div class="line">                .catch(<span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">this</span>.loading = <span class="literal">false</span>))</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>我们需要在每一个退出的情况下将 loading 状态设置为 false，这至少意味着你要写 3 遍，非常冗余。而且很容易忘记。</p>
<p>我们可以抽象出来，可以发现每当这种函数运行的时候，首先将相关的变量设置成 true，然后等待异步操作完成或者失败之后，再将变量设置回之前的值。</p>
<p>完成这个操作最简单的方式就是代理，在用户的函数调用之前设置相应的变量，在用户的函数调用完成之后，或者如果函数是异步操作，那么通过返回一个 promise 来表示异步操作。</p>
<p>既然讲到了代理模式，那么在 JS 中有很多，不过我们在这里通过一个 ES6 的新语法，装饰器。</p>
<p>话不多说，上代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Lever <span class="keyword">from</span> <span class="string">'vue-lever'</span></div><div class="line"><span class="comment">// import others</span></div><div class="line"></div><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">    methods: &#123;</div><div class="line">        @Lever.Lever(<span class="string">'loading'</span>)</div><div class="line">        asyncAction() &#123;</div><div class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.$http.doing() <span class="comment">// return a promise</span></div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>这个功能和上面的那段代码是一模一样的，是不是感觉用了装饰器之后就变得特别简单了呢？</p>
<p>不过这里有一点需要注意的是，为了方便和隔离，我将所有的变量全都放在 <code>levers</code> 这个变量下面，也就是说你需要通过 <code>levers.loading</code> 来使用，而不是 <code>loading</code></p>
<p>不过现在暂时没有支持回调函数的方式，也就是你必须要返回一个 promise，否则是不行的。</p>
<p>其次我们这里还有手动模式，也就是如果你不想用装饰器的话，你可以通过 <code>this.$lever(name, value)</code>，来更改状态，其中 <code>name</code> 为变量名，<code>value</code> 为 true/false 值。当然这里也提供两个 alias，<code>this.$lever.t(name)</code> 和 <code>this.$lever.f(name)</code>。方便设置变量为 true/false。</p>
<p>还有一些其他的参数，大家可以去 <a href="https://github.com/XGHeaven/vue-lever" target="_blank" rel="external">Github</a> 网站查看。这篇文章就写到这里。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/08/17/vue-lever-a-plugin-help-you-to-manager-true-false-state/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/08/12/a-new-v8-is-coming-node-js-performance-is-changeing/">
                            A New V8 Is Coming node.js Performance Is Changeing
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Sat Aug 12 2017 15:07:22 GMT+0800">
	
		    8月 12, 2017
    	
    </time>
    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    
                    
                        

                    
                    
                        <p>
                            <a href="/2017/08/12/a-new-v8-is-coming-node-js-performance-is-changeing/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/06/12/the-first-interview-of-alibaba-for-web-developer/">
                            阿里巴巴的前端实习生面试总结 - 其实是 Node.js
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Mon Jun 12 2017 20:30:11 GMT+0800">
	
		    6月 12, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/随笔/">随笔</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <p>17年4月，终于迎来了阿里巴巴的实习招聘，我也很开心的通过朴神内推到阿里云的前端开发。故事就是这么展开了。</p>
<p>还记得当初3月份（我也记不清了）朴神在微博上面发了谁愿意和他一起写 Node ，于是我激动的花了一晚上写了一张简历页面，开开心心的给了朴神，他给我回了一句：你联系方式都没有写，让我怎么联系你呀。QAQ，竟然忘了这么重要的事情，好丢脸。于是赶紧补了一下又给了朴神。</p>
<p>过了许久，等来了内推邮件，打开一看，哎不对啊，为啥是前端开发工程师？不是说好的写 Node 么-_-。于是又仔细看了阿里要的职位，发现原来 Node 是包含在前端开发工程师中的呀。</p>
<p style="color:white">也不知道是谁定的，Node竟然属于前端开发</p>

<p>不管了，于是又开开心心的填上去了。</p>
<p>Long Long Time Passed，果不其然，等来了第一次的电话面试。</p>
<p>电话面试简单来说他一开始先问了我一些关于 Node 方面的内容，比如对中间件的理解，平时遇到的一些困难，对模块化的运用等等，感觉自己都能答出来。之后他也问了一些前端的内容，我也说了一下之前也玩过手机浏览器内核，对兼容性稍微了解一些，<span style="color:white">用的时候查一下不就好了，何必要记住呢LOL</span>。</p>
<p>之后他说道自己是阿里云这边的，因为阿里云要面向海外市场，需要考虑手机兼容性的事情，问我愿意不愿意去解决兼容性的事情。于是我很老实的回答道：可以去做，但是能少碰到就碰到吧~~现在回想起来，我应该直接回答可以，不用加后面那句话。不过我确实想说一下自己的心声吧。</p>
<p>基本没有太多的卡壳，开开心心的结束了电话面试。原本以为自己说的比较好了，但是很久很久之后，都没有消息。某一天，朋友突然说道：“哎，你不用参加阿里的笔试么？”，我说道：“不用啊，我是内推的。”。说完之后我心里犯嘀咕，话说为啥这么久都没有消息，战战兢兢的打开了 campus.alibaba.com，点击个人中心……</p>
<img src="/2017/06/12/the-first-interview-of-alibaba-for-web-developer/reject1.png" alt="reject1.png" title="">
<p>WHAT THE FUCK!!! 被回绝了，为啥连个短信都没有的。心中一万个 🐴 飞过。</p>
<p>不过好事就是，我自动从内推变成了自主投递了，至少还有一次新的机会，这也就是说明今晚我要和他们一起笔试了~~都不明白自己是怎么被回绝的，连个原因都不写的么 😫 不管了，平复一下自己的心情，开始写笔试吧，就算不是内推，自主投递也可以的么。</p>
<p>几天后，笔试开始，前面的选择题就不多说了，没什么太难的，都是一些概念性的问题，包括 js 和 前端的。</p>
<blockquote>
<p>// 其实是我忘记有哪些选择题了</p>
</blockquote>
<p>主要说一些有一道算法题，就是让你将二进制转成十进制，大家第一个想到的便是 <code>Number.parseInt</code>，当然我也是的。不过想想也知道，肯定不会这么简单，坑的地方在于这个二进制很大，js 在处理超过 52 位二进制数的时候就会有精度问题，但是我的时间不多了，也懒得去写高精度了，要同时去写乘法和加法。不给当时时间太紧，其实是有更好的方法的。</p>
<p>简单来说，其实就是高精度的变种，只不过我们不需要实现乘法和加法。具体我就不讲了。</p>
<p>后面还要一道 canvas 的题目，让你画一个东西，反正我以前玩过，看着以前的代码，很快就撸出来了。</p>
<p>最后一道是简答题，让你说一下在实现自动保存功能的时候会遇到什么问题，多人合作会出现什么问题？WTF，这是什么问题啊。还好平时用过 quip 这种基于行锁的多人文本编辑工具，反正就大体扯了扯，顺便扯了一下如何优化前端的速度，和减轻服务器的负载。</p>
<p>于是，笔试结束了。感觉稍微有点虚，不过还是稍微有点信心的。也算是平复了一下内推被拒的心情吧。</p>
<p>依旧是漫长的等待，转眼已经5月中旬多了。这个时候还没有消息，我感觉都要跪了，都要打算去找别的公司了，因为再不找的话，就要错过找实习的最佳时机了。各大公司基本都是这个时候开始找实习的。（一些小公司的暑期实习除外）</p>
<p>就在我打算放弃的时候，就收到了阿里的远程一面的通知，这个时候挺开心的，于是就开开心心的去准备面试的内容了，也没心思去找别的公司了。</p>
<p>之后远程的一面、二面、hr面，不知不觉就到了6月份了。</p>
<p>一面的时候，面试官还是我们旁边的学校，我是杭电的，他是理工的。他问了一些问题，主要是关于 Node 的。这次真的是一点前端的内容都没有问。终于问了一下 Node 的内存管理机制，不过话说回来，和 java 的有点像，但不完全一样。记得 java 是采用引用计数的方式，node 是标记清除。不过 java 还有很多别的算法。聊了聊平时项目中遇到的问题，聊了聊 redis 的使用中遇到的坑。不过因为我用的太少，基本没什么坑可以踩。顺便问了我一个问题，就是说如果发现一个服务器的压力过大，该怎么处理（原句忘了，不过大体是这个意思）。想了一会，想到应该大体从代码和架构方面下手，一个优化代码，一个布置集群。但是不知道他想问我那个，于是半天没说。结果他说到，其实很简单的，就是将服务拆分，分布在不同的机器上就可以了。想了一下，嗯他说的也对。不知不觉，面试结束了。最后他说了一句，感觉你基础还可以，就是实践有点少，不过我先帮你送到后面去吧。其实他有一句话挺实在的，就是想要在后端有发展，最好要去学学 Java。但是我就是想在 node 混，除非我觉得 node 已经实现不了公司的需求的时候，我再尝试转 java。</p>
<p>就这样，一面结束了，感觉自己好水，其实很多问题都不能准确清楚的答出来。毕竟自己平时只是做项目的时候用了一下，而且项目不大，不会遇到太多性能问题，也就没有太多深入研究（其实是没那么多时间去研究，而且可以玩的技术还有那么多，想去玩新技术，于是就懒得太深入研究了）</p>
<p>过了许久，也不知道几天，反正感觉挺漫长的，终于等来了终面。</p>
<blockquote>
<p>阿里定义的终面有点歧义，不知道是实习生的终面还是技术的终面，不管了，既来之则安之。其实终面对于我来说就是技术二面和hr面LOL</p>
</blockquote>
<p>二面，问的问题更加具体了一些，没有问太基础的东西。主要是针对我平时项目中遇到的一些问题展开问了一下。感觉比一面问的少，但是聊的还挺开心的。讲了讲平时 docker 分发部署代码的东东。讲了讲为啥想来阿里，是为了技术还是朴神、deadhorse 他们的，我说都有😂。感觉这一面，他更多的是按照我的简历来提问的，反正也是瞎比回答么~~</p>
<p>然后就结束了，我原本以为这样就结束了，过几天再等 hr 面试。然后我就去搞我自己的 minecraft 管理器了。</p>
<p>结果突然间收到一个短信，说我被 hr 翻牌了，赶紧去准备面试。</p>
<p>OMG，这么快的，我都没准备呢。算了，兵来将挡，水来土掩，硬着头皮就上了，反正是 hr 面，不太需要将技术什么的，聊聊天就好了。我也不喜欢在别人面前装，反正我想说啥就说啥吧，没必要为了 hr 而特意去说他喜欢听的话。不过稍微说的好听点，我还是可以的。😂聊了聊阿里的武侠文化，花名文化，倒立文化等等。聊了聊平时的爱好，喜欢做啥。大学当中的收获什么的。说起这个，感觉大学收获最大的就是大一的时候和一些大神们出去瞎混，参加各种活动，d2，day one，coding线下会，黑客马拉松。coding 线下会拿到了一个洋葱猴顺便还认识了现在的 cnode 站长 alsotang，不过那个时候他还是在阿里工作A_A。而且自己不善于交际，打字聊天还可以，张口说话就不知道该说啥了，所以那个时候他也不认识我。不过听 alsotang 和 wph95 聊得挺开心的，才知道钉钉在阿里其实是蛮流行的，不过钉钉没有 gcm ，差评。</p>
<p>不过不得不佩服 wph95 大神，codevs站长。也就是因为他，我知道了 Angular，Docker，Webpack，Stylus，Gulp 等等好玩的东西。虽然他是做 python 后端的，但是他的知识面真的广，前端后端运维都有涉猎。看他和各位同行大佬撕逼的感觉真爽，尤其知道当他们知道他还是一个杭电学生的时候，哈哈哈，想想就好玩。而且大二上就去 Daocloud 实习了~~真的佩服他是怎么认识那么多人的😂。反正大二之后就不怎么和他联系了，挺感激他的</p>
<p>hr 面也就这么结束了，面试我的 hr 有点胖，顺便调侃了一下他能不能倒立，哈哈哈。</p>
<p>反正这几场面试下来，比较自信但是又没有把握。于是我就在纠结，这个时候已经快6月份了，要不要再去看看别的公司，于是发现那些内推的消息或者实习生的消息，基本都是2、3个月以前的了。饿了么，美团似乎连实习生招聘的链接都没有。腾讯估计已经结束了。自己觉得赌一把吧，到时候再说。</p>
<p>于是这一赌，就等来了下面的这个消息。而且依旧没有短信，我也是前几天耐不住性子了，去刷新了一下。你知道从面试中的状态变成已回绝的状态有多绝望么😫</p>
<img src="/2017/06/12/the-first-interview-of-alibaba-for-web-developer/reject2.png" alt="reject2.png" title="">
<p>这个时候，我开始找各大公司的实习，心累中。。。你早回绝一下也行，非要等到这么晚才回绝，而且还没有通知。</p>
<p>总结一下吧，就是面试笔试没什么太大难度，最后就被 K.O. 了。感觉就跟哑巴吃黄连，有苦说不出。。。真心不知道自己哪里 gg 了。也许是最后跟 hr 聊天的时候说我自己太懒吧，经常容易拖。经常是立下 flag 说今晚写完 api，然后晚上去玩 hadoop 了🐭。突然想起来 google 的 instant app 什么时候才能普及呢，好喜欢这个，感觉 react native 可以下岗了。</p>
<p>或许有的人说，你应该早就多准备，多投几个公司。说实话，我不是没有想过，投很多公司，假如正好只有一个公司要我，那还好。就算是一个都不要都可以。最怕的就是同时好几个公司要，如何拒绝其他公司，感觉这好为难啊（PS：这并不表明自己有多么自信，只是讲述一种可能）</p>
<p>最后说一句，感觉自己和大神有一个很大的差距便是大神总会有各种各样的获取信息的途径，而我，只能听大神说🐶而且他们感觉有时候就是一个代码机器，维护着好几个库，还能天天 push。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/06/12/the-first-interview-of-alibaba-for-web-developer/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/06/09/all-in-one-timer/">
                            All in One - Timer
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Fri Jun 09 2017 00:50:14 GMT+0800">
	
		    6月 09, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/All-in-One/">All in One</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <h1 id="All-in-one-Timer-定时器"><a href="#All-in-one-Timer-定时器" class="headerlink" title="All in one - Timer 定时器"></a>All in one - Timer 定时器</h1><h1 id="table-of-contents">目录</h1><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#All-in-one-Timer-定时器"><span class="toc-text">All in one - Timer 定时器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Golang"><span class="toc-text">Golang</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Timer"><span class="toc-text">Timer</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ticker"><span class="toc-text">Ticker</span></a></li></ol></li></ol>
<p>这一篇文章，我们主要讲解一下不同语言之间关于定时器的操作和坑。</p>
<p>首先说一些这个坑中的一些前提，首先我这里所有的都是和 JavaScript 与 C++ 相比较进行学习的，所以下面不会出现 JavaScript 相关的教程，除非 JavaScript 在这个上面的坑太多，非讲不可。如果你没有相关的语言基础，请去学习。谢谢。</p>
<p>首先先从 golang 语言讲起来</p>
<h1 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h1><p>在 golang 中单次定时器和循环定时器分别是 Timer 和 Ticker。这两个都是一个结构体，结构如下</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">type</span> Timer <span class="keyword">struct</span> &#123;</div><div class="line">        C &lt;-<span class="keyword">chan</span> Time</div><div class="line">        <span class="comment">// contains filtered or unexported fields</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">type</span> Ticker <span class="keyword">struct</span> &#123;</div><div class="line">        C &lt;-<span class="keyword">chan</span> Time <span class="comment">// The channel on which the ticks are delivered.</span></div><div class="line">        <span class="comment">// contains filtered or unexported fields</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>其中 <code>C</code> 是一个 只读的 Time 类型的 channel，定时器根据传入的时间设置，定时向这个 channel 输入时间。你需要做的是等待这个 channel 中的数据。</p>
<p>每一个结构体都有如下方法：</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">func</span> <span class="params">(t *Timer)</span> <span class="title">Reset</span><span class="params">(d Duration)</span> <span class="title">bool</span></span></div><div class="line"><span class="function"><span class="title">func</span> <span class="params">(t *Timer)</span> <span class="title">Stop</span><span class="params">()</span> <span class="title">bool</span></span></div><div class="line"><span class="function"><span class="title">func</span> <span class="params">(t *Ticker)</span> <span class="title">Stop</span><span class="params">()</span></span></div></pre></td></tr></table></figure>
<p>首先 Timer 和 Ticker 的区别不是很大，下面我们将两者的共性以 Timer 来讲述， 后面会针对两者不同的内容进行讲解。</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    timer := time.NewTimer(time.Second * <span class="number">2</span>)</div><div class="line">  	time := &lt;- timer.C</div><div class="line">    <span class="built_in">println</span>(<span class="string">"Timer expired"</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>参数接受一个时间参数，表示多久后向 channel 传输数据，也就是你想要定时的间隔，上面这个例子表示两秒之后输出 <code>Timer expired</code> 。</p>
<p>那么每次我们都要这么麻烦的设置一个时间，然后等待 channel，运行制定的函数么？</p>
<p>其实不是的，golfing 给我们内置了一个函数，类似于 JavaScript 的 setTimeout，那就是 AfterFunc。</p>
<p>函数如下：</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">AfterFunc</span><span class="params">(d Duration, f <span class="keyword">func</span>()</span>) *<span class="title">Timer</span></span></div></pre></td></tr></table></figure>
<p>就是他会给你返回一个 <code>*Timer</code> ，并在指定时间之后，在 goroutine 中运行你的函数。</p>
<p>上面说完了如何启动，那么怎么停止呢？很简单，就是 <code>Stop</code>。</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    timer := time.NewTimer(time.Second)</div><div class="line">    <span class="keyword">go</span> <span class="function"><span class="keyword">func</span><span class="params">()</span></span> &#123;</div><div class="line">        &lt;- timer.C</div><div class="line">        <span class="built_in">println</span>(<span class="string">"Timer expired"</span>)</div><div class="line">    &#125;()</div><div class="line">    stop := timer.Stop()</div><div class="line">    <span class="built_in">println</span>(<span class="string">"Timer cancelled:"</span>, stop)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Timer cancelled: true</div></pre></td></tr></table></figure>
<p>调用停止之后，会返回一个 Bool 值：</p>
<ul>
<li><code>true</code> 停止成功</li>
<li><code>false</code> 已经被停止或者已经到期触发</li>
</ul>
<p>这里有一点需要注意的是，调用停止之后，并不会关闭 channel，如果你想检测那么你可以通过额外添加一个 done channel 来协助。</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    timer := time.NewTimer(time.Second)</div><div class="line">    done := <span class="built_in">make</span>(<span class="keyword">chan</span> <span class="keyword">bool</span>)</div><div class="line">    <span class="keyword">go</span> <span class="function"><span class="keyword">func</span><span class="params">()</span></span> &#123;</div><div class="line">      <span class="keyword">select</span>&#123;</div><div class="line">        <span class="keyword">case</span> &lt;- timer.C:</div><div class="line">          <span class="built_in">println</span>(<span class="string">"Timer expired"</span>)</div><div class="line">        <span class="keyword">case</span> &lt;- done:</div><div class="line">          <span class="built_in">println</span>(<span class="string">"Timer stop"</span>)</div><div class="line">      &#125;</div><div class="line">    &#125;()</div><div class="line">    stop := timer.Stop()</div><div class="line">    done &lt;- <span class="literal">true</span></div><div class="line">    <span class="built_in">println</span>(<span class="string">"Timer cancelled:"</span>, stop)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Timer stop</div><div class="line">Timer cancelled: true</div></pre></td></tr></table></figure>
<p>所以比较麻烦，大家可以自己封装一下。</p>
<h2 id="Timer"><a href="#Timer" class="headerlink" title="Timer"></a>Timer</h2><p>单次定时器有一个特殊的方法就是 Reset，他可以将一个定时器的超时时间重新定义，这样你可以重复利用这个定时器。</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    timer := time.NewTimer(time.Second)</div><div class="line">    <span class="keyword">go</span> <span class="function"><span class="keyword">func</span><span class="params">()</span></span> &#123;</div><div class="line">      &lt;- timer.C</div><div class="line">      <span class="built_in">println</span>(<span class="string">"Timer expired"</span>)</div><div class="line">      &lt;- timer.C</div><div class="line">      <span class="built_in">println</span>(<span class="string">"Timer expired again"</span>)</div><div class="line">    &#125;()</div><div class="line">    time.Sleep(time.Second * <span class="number">2</span>)</div><div class="line">    timer.Reset(time.Second)</div><div class="line">    time.Sleep(time.Second * <span class="number">2</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Timer expired</div><div class="line">Timer expired again</div></pre></td></tr></table></figure>
<p>同理，你可以用在 AfterFunc 中</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    timer := time.AfterFunc(time.Second, <span class="function"><span class="keyword">func</span><span class="params">()</span></span> &#123;</div><div class="line">      <span class="built_in">println</span>(<span class="string">"Timer expired"</span>)</div><div class="line">    &#125;)</div><div class="line">    time.Sleep(time.Second * <span class="number">2</span>)</div><div class="line">    timer.Reset(time.Second)</div><div class="line">    time.Sleep(time.Second * <span class="number">2</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Timer expired</div><div class="line">Timer expired</div></pre></td></tr></table></figure>
<p>简直和 JavaScript 中的 setTimeout 像的不能再像了。</p>
<h2 id="Ticker"><a href="#Ticker" class="headerlink" title="Ticker"></a>Ticker</h2><p>这里的 Ticker 其实相当于 JavaScript 中的 setInterval，不过他没有类似 Timer 的 AfterFunc，只有一个最基础的构造器。</p>
<figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> <span class="string">"time"</span></div><div class="line"><span class="keyword">import</span> <span class="string">"fmt"</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> &#123;</div><div class="line">    ticker := time.NewTicker(time.Millisecond * <span class="number">500</span>)</div><div class="line">    <span class="keyword">go</span> <span class="function"><span class="keyword">func</span><span class="params">()</span></span> &#123;</div><div class="line">        <span class="keyword">for</span> t := <span class="keyword">range</span> ticker.C &#123;</div><div class="line">            fmt.Println(<span class="string">"Tick at"</span>, t)</div><div class="line">        &#125;</div><div class="line">    &#125;()</div><div class="line">    time.Sleep(time.Millisecond * <span class="number">1500</span>)</div><div class="line">    ticker.Stop()</div><div class="line">    fmt.Println(<span class="string">"Ticker stopped"</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">Tick at 2012-09-22 15:58:40.912926 -0400 EDT</div><div class="line">Tick at 2012-09-22 15:58:41.413892 -0400 EDT</div><div class="line">Tick at 2012-09-22 15:58:41.913888 -0400 EDT</div><div class="line">Ticker stopped</div></pre></td></tr></table></figure>
<p>Ticker 同样也有同 Timer 一样无法关闭 channel 的问题，解决方法和 Timer 类似，我就不多说了。</p>
<p>不过 Ticker 的 Stop 函数与 Timer 的不太一样，因为他没有是否触发过的问题，所以 Ticker 的 Stop是没有返回值的，这一点需要注意。</p>
<p>暂时先写这一个，以后如果有新的，持续更新。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/06/09/all-in-one-timer/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/05/03/cli-build-tools-for-yargs/">
                            命令行构造工具之 Yargs 详细介绍
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Wed May 03 2017 18:55:43 GMT+0800">
	
		    5月 03, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Node-js/">Node.js</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <h1 id="table-of-contents">目录</h1><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#命令行工具构造工具之-yargs"><span class="toc-text">命令行工具构造工具之 yargs</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#光速开始"><span class="toc-text">光速开始</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#argv-一切的开始，简单的不要不要的"><span class="toc-text">.argv 一切的开始，简单的不要不要的</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#普通参数"><span class="toc-text">普通参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#简写参数"><span class="toc-text">简写参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#全写参数"><span class="toc-text">全写参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#结果合并"><span class="toc-text">结果合并</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#我就要你在我的身边，-demandOption-key-msg"><span class="toc-text">我就要你在我的身边，.demandOption(key, msg)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#啥？你嫌我太长？还是太短-alias"><span class="toc-text">啥？你嫌我太长？还是太短:).alias</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#你要我怎样我就怎样，-boolean-array-number-count-choices"><span class="toc-text">你要我怎样我就怎样，.boolean .array .number .count .choices</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#array-key"><span class="toc-text">.array(key)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#boolean-key"><span class="toc-text">.boolean(key)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#number-key"><span class="toc-text">.number(key)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#count-key"><span class="toc-text">.count(key)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#choices-key-list"><span class="toc-text">.choices(key, list)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#听说你和别人有千丝万缕的关系-conflicts-implies"><span class="toc-text">听说你和别人有千丝万缕的关系:( .conflicts .implies</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#可以"><span class="toc-text">可以</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#大家在一起吧-option-options"><span class="toc-text">大家在一起吧 :) .option .options</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#有用但是很简单其余参数"><span class="toc-text">有用但是很简单其余参数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小弟来了-command"><span class="toc-text">小弟来了 (-_-) .command</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#这个位置是你的，别人抢不走-arg1-lt-arg2-gt"><span class="toc-text">这个位置是你的，别人抢不走 [arg1] <arg2></span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#默认命令"><span class="toc-text">默认命令 *</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#方便一点-commandDir"><span class="toc-text">方便一点 .commandDir</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#从别的地方来-config-env-coerce"><span class="toc-text">从别的地方来 .config .env .coerce</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#总结"><span class="toc-text">总结</span></a></li></ol></li></ol>
<h1 id="命令行工具构造工具之-yargs"><a href="#命令行工具构造工具之-yargs" class="headerlink" title="命令行工具构造工具之 yargs"></a>命令行工具构造工具之 yargs</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>话说 yargs 是什么呢？简单来说，就是用来解析 cli 参数的。话不多说，我们来简单了解一下。</p>
<h2 id="光速开始"><a href="#光速开始" class="headerlink" title="光速开始"></a>光速开始</h2><h3 id="argv-一切的开始，简单的不要不要的"><a href="#argv-一切的开始，简单的不要不要的" class="headerlink" title=".argv 一切的开始，简单的不要不要的"></a>.argv 一切的开始，简单的不要不要的</h3><p>使用这个最简单的方式就是直接调用 <code>.argv</code> 这个 getter，他会自动对 <code>process.argv</code> 进行解析。并返回解析后的对象。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// argv.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).argv;</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -v --version --name whos</span></div><div class="line">&#123; _: [], v: <span class="literal">true</span>, version: <span class="literal">true</span>, name: <span class="string">'whos'</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>什么缩写，什么参数，统统搞定。是不是 so easy。</p>
<p>在默认情况下，所有的参数只有三种值，<code>Boolean</code>、<code>String</code>、<code>Array&lt;Boolean|String</code>。</p>
<p>而且 <code>$0</code> 代表当前脚本的名称，这个就不多讲了</p>
<p>参数后面可以使用空格或者 <code>=</code> 。例如 <code>-d=ok —name=bill</code></p>
<h4 id="普通参数"><a href="#普通参数" class="headerlink" title="普通参数"></a>普通参数</h4><p>如果参数没有 <code>-</code> 开头，那么将它放入 <code>_</code> ，简称为普通参数</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js a b c</span></div><div class="line">&#123; _: [ <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ], <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="简写参数"><a href="#简写参数" class="headerlink" title="简写参数"></a>简写参数</h4><p>如果参数只有一个 <code>-</code> 开头，那么后面的参数为缩写参数，缩写参数的值默认设置成 <code>true</code>。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -a -b -c</span></div><div class="line">&#123; _: [], a: <span class="literal">true</span>, b: <span class="literal">true</span>, c: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>同时，<code>yargs</code> 支持将缩写参数合并在一起书写。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -abc</span></div><div class="line">&#123; _: [], a: <span class="literal">true</span>, b: <span class="literal">true</span>, c: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>效果和上面是一样的。</p>
<p>如果缩写参数后面跟着普通参数，那么缩写参数的值就会自动设置成普通参数的值而不再是 <code>true</code>。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -a haha -b lala -c hehe</span></div><div class="line">&#123; _: [], a: <span class="string">'haha'</span>, b: <span class="string">'lala'</span>, c: <span class="string">'hehe'</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>那么有人问了，如果我这样写会怎么样？ <code>-abc hahaha</code>，let’s try.</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -abc hahaha</span></div><div class="line">&#123; _: [], a: <span class="literal">true</span>, b: <span class="literal">true</span>, c: <span class="string">'hahaha'</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>结果显示，其实就和</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -a -b -c hahaha</span></div></pre></td></tr></table></figure>
<p>是一样的，可以见得，代码中其实就是将 <code>-abc</code> 拆成了 <code>-a -b -c</code> 进行解析的。</p>
<h4 id="全写参数"><a href="#全写参数" class="headerlink" title="全写参数"></a>全写参数</h4><p>除去上面两种参数，就剩下全写参数（不要吐槽为啥叫全写参数，因为实在是不知道该叫什么名字）</p>
<p>全写参数和缩写参数差不多，只不过他不能合并成一个书写，其他都是一样的</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js --version --laugh haha</span></div><div class="line">&#123; _: [], version: <span class="literal">true</span>, laugh: <span class="string">'haha'</span>, <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="结果合并"><a href="#结果合并" class="headerlink" title="结果合并"></a>结果合并</h4><p>作为一个好 Module ，怎么会没有考虑到下面这种奇葩情况呢？</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js -a -a -a -a -a -a -a</span></div></pre></td></tr></table></figure>
<p>大家猜猜会是什么结果 :) 此处略过 10000 秒。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&#123; _: [],</div><div class="line">  a: [ <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>没错，<code>yargs</code> 将每一个参数单独处理，然后最后合并成了一个数组，是不是很有意思，也就是说你可以写出下面的东东。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node argv.js --fuck whose --fuck your --fuck daddy --fuck</span></div><div class="line">&#123; _: [],</div><div class="line">  fuck: [ <span class="string">'whose'</span>, <span class="string">'your'</span>, <span class="string">'daddy'</span>, <span class="literal">true</span> ],</div><div class="line">  <span class="string">'$0'</span>: <span class="string">'argv.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>最简单的模式，也是最有趣的模式，值得去玩。</p>
<h3 id="我就要你在我的身边，-demandOption-key-msg"><a href="#我就要你在我的身边，-demandOption-key-msg" class="headerlink" title="我就要你在我的身边，.demandOption(key, msg)"></a>我就要你在我的身边，<code>.demandOption(key, msg)</code></h3><p>如果你需要某个参数一定存在，这怎么办呢？难道要自己手动 <code>if</code> 一下，那真的好蠢啊。</p>
<p><code>.demandOption</code> 就是这么来了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// demand.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).demandOption(<span class="string">'baby'</span>).argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<p><code>baby</code> 在，世界一切太平，不管他是怎么在我的身边的。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node demand.js --baby</span></div><div class="line">&#123; _: [], baby: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'demand.js'</span> &#125;</div><div class="line"><span class="comment"># node demand.js --baby I</span></div><div class="line">&#123; _: [], baby: <span class="string">'I'</span>, <span class="string">'$0'</span>: <span class="string">'demand.js'</span> &#125;</div><div class="line"><span class="comment"># node demand.js --baby --baby --baby --baby I</span></div><div class="line">&#123; _: [], baby: [ <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span>, <span class="string">'I'</span> ], <span class="string">'$0'</span>: <span class="string">'demand.js'</span> &#125;</div></pre></td></tr></table></figure>
<p><code>baby</code> 不在，世界爆炸(exit code != 0)</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node demand.js</span></div><div class="line">Options:</div><div class="line">  --baby                                     [required]</div><div class="line"></div><div class="line">Missing required argument: baby</div></pre></td></tr></table></figure>
<p><code>.demandOption(key, msg)</code> 的 <code>key</code> 支持数组和字符串，分别表示单个和多个 <code>required</code> 的参数。而第二个参数值在没有满足条件的时候显示的文字。</p>
<h3 id="啥？你嫌我太长？还是太短-alias"><a href="#啥？你嫌我太长？还是太短-alias" class="headerlink" title="啥？你嫌我太长？还是太短:).alias"></a>啥？你嫌我太长？还是太短:)<code>.alias</code></h3><blockquote>
<p> 俗话说的好，参数太长怎么办，变短一点喽</p>
</blockquote>
<p>其实是我自己说的，可以给一个命令取一个别名，不管是变长还是变短，都很简单。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// alias.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).alias(<span class="string">'long'</span>, [<span class="string">'l'</span>, <span class="string">'lo'</span>]).alias(<span class="string">'short'</span>, <span class="string">'s'</span>).argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node alias.js -l --long --lo -s --short</span></div><div class="line">&#123; _: [],</div><div class="line">  l: [ <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  long: [ <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  lo: [ <span class="literal">true</span>, <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  s: [ <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  short: [ <span class="literal">true</span>, <span class="literal">true</span> ],</div><div class="line">  <span class="string">'$0'</span>: <span class="string">'alias.js'</span> &#125;</div></pre></td></tr></table></figure>
<p>可以看到 <code>l</code> <code>lo</code> <code>long</code> 是一样的，<code>s</code> <code>short</code> 是一样的，可长可短，自由随意。</p>
<h3 id="你要我怎样我就怎样，-boolean-array-number-count-choices"><a href="#你要我怎样我就怎样，-boolean-array-number-count-choices" class="headerlink" title="你要我怎样我就怎样，.boolean .array .number .count .choices"></a>你要我怎样我就怎样，<code>.boolean</code> <code>.array</code> <code>.number</code> <code>.count</code> <code>.choices</code></h3><p>有的时候，需要某些参数是固定的格式，而不是其他的方式，那么就需要这些方法来描述一个参数的类型。这些参数对于 <code>alias</code> 之后的参数同样也是可以的。</p>
<h4 id="array-key"><a href="#array-key" class="headerlink" title=".array(key)"></a><code>.array(key)</code></h4><p>顾名思义，直接将参数的类型设置为数组，他会将后面所有的非普通参数作为当前参数的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// array.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).array(<span class="string">'girls'</span>).argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node array.js --girls Abby Aimee --stop --girls Alisa Angelia Amanda</span></div><div class="line">&#123; _: [],</div><div class="line">  girls: [ <span class="string">'Abby'</span>, <span class="string">'Aimee'</span>, <span class="string">'Alisa'</span>, <span class="string">'Angelia'</span>, <span class="string">'Amanda'</span> ],</div><div class="line">  stop: <span class="literal">true</span>,</div><div class="line">  <span class="string">'$0'</span>: <span class="string">'array.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="boolean-key"><a href="#boolean-key" class="headerlink" title=".boolean(key)"></a><code>.boolean(key)</code></h4><p>将参数类型设置为 <code>Boolean</code> 类型。如果后面的类型不是 <code>Boolean</code> 类型(<code>true</code>、<code>false</code>)，那么将不会设置为当前参数的值，并且当有多个的时候，不会合并成数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// boolean.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).boolean(<span class="string">'love'</span>).argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node boolean.js I --love you and --love again</span></div><div class="line">&#123; _: [ <span class="string">'I'</span>, <span class="string">'you'</span>, <span class="string">'and'</span>, <span class="string">'again'</span> ],</div><div class="line">  love: <span class="literal">true</span>,</div><div class="line">  <span class="string">'$0'</span>: <span class="string">'boolean.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="number-key"><a href="#number-key" class="headerlink" title=".number(key)"></a><code>.number(key)</code></h4><p>将参数类型设置为 <code>Number</code> 类型。基本规则如下：</p>
<ol>
<li>如果没有填写值，那么默认是 <code>undefined</code></li>
<li>如果设置的值不合法，那么是 <code>NaN</code></li>
<li>否则是格式化为数字，使用 <code>Number</code> 构造方法</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// number.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).number([<span class="string">'bust'</span>, <span class="string">'waist'</span>, <span class="string">'hips'</span>, <span class="string">'height'</span>]).argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node number.js --bust --waist 24 --hips zz</span></div><div class="line">&#123; _: [], bust: undefined, waist: 24, hips: NaN, <span class="string">'$0'</span>: <span class="string">'number.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="count-key"><a href="#count-key" class="headerlink" title=".count(key)"></a><code>.count(key)</code></h4><p>统计一下这个参数被使用了多少次，使用 <code>.count</code> 之后，参数默认就变成了 <code>Boolean</code> 类型，但是只统计他出现的次数。经常用来作为设置 debug 的输出级别。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// count.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>).count(<span class="string">'v'</span>).count(<span class="string">'people'</span>).argv</div><div class="line"><span class="built_in">console</span>.log(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node count.js -v -vv --people --people false</span></div><div class="line">&#123; _: [], v: 3, people: 2, <span class="string">'$0'</span>: <span class="string">'count.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="choices-key-list"><a href="#choices-key-list" class="headerlink" title=".choices(key, list)"></a><code>.choices(key, list)</code></h4><p>设置某个参数只能为某些值，可以和<code>number</code> <code>boolean</code> <code>count</code> 组合。</p>
<p>其本质是 <code>indexOf</code> 操作，也就是 <code>===</code> 做比较操作，所以这也就是为啥 <code>array</code> 不能和他匹配的原因。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// choices</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>)</div><div class="line">	.choices(<span class="string">'look'</span>, [<span class="string">'beatuify'</span>, <span class="string">'oh, god'</span>])</div><div class="line">	.choices(<span class="string">'time'</span>, [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]).number(<span class="string">'time'</span>)</div><div class="line">	.choices(<span class="string">'many'</span>, [<span class="number">1</span>,<span class="number">2</span>]).count(<span class="string">'many'</span>)</div><div class="line">	.argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node choices.js --look "oh, god"</span></div><div class="line">&#123; _: [], look: <span class="string">'oh, god'</span>, <span class="string">'$0'</span>: <span class="string">'choices.js'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node choices.js --look no</span></div><div class="line">Invalid values:</div><div class="line">  Argument: look, Given: <span class="string">"no"</span>, Choices: <span class="string">"beatuify"</span>, <span class="string">"oh, god"</span></div><div class="line">  </div><div class="line"><span class="comment"># node choices.js --time 1</span></div><div class="line">&#123; _: [], time: 1, <span class="string">'$0'</span>: <span class="string">'choices.js'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node choices.js --time 5</span></div><div class="line">Invalid values:</div><div class="line">  Argument: time, Given: 5, Choices: 1, 2, 3, 4</div><div class="line"> </div><div class="line"><span class="comment"># node choices.js --many --many</span></div><div class="line">&#123; _: [], many: 2, <span class="string">'$0'</span>: <span class="string">'choices.js'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node choices.js --many --many --many</span></div><div class="line">Invalid values:</div><div class="line">  Argument: many, Given: 3, Choices: 1, 2</div></pre></td></tr></table></figure>
<h3 id="听说你和别人有千丝万缕的关系-conflicts-implies"><a href="#听说你和别人有千丝万缕的关系-conflicts-implies" class="headerlink" title="听说你和别人有千丝万缕的关系:( .conflicts .implies"></a>听说你和别人有千丝万缕的关系:( <code>.conflicts</code> <code>.implies</code></h3><p>简单一说：</p>
<ul>
<li><code>.implies(我, 她)</code> 有我先有她，有她不一定有我</li>
<li><code>.confilcts(我, 他)</code> 有我没他，有他没我</li>
</ul>
<p>如果两个都存在在一个参数上面的时候，<code>implies</code> 优先级会更高。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// imcon.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>)</div><div class="line">	.conflicts(<span class="string">'me'</span>, <span class="string">'him'</span>)</div><div class="line">	.implies(<span class="string">'me'</span>, <span class="string">'her'</span>)</div><div class="line">	.argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node imcon.js --me --him --her</span></div><div class="line">Arguments me and him are mutually exclusive</div><div class="line"></div><div class="line"><span class="comment"># implies 有更高的优先级</span></div><div class="line"><span class="comment"># node imcon.js --me --him</span></div><div class="line">Implications failed:</div><div class="line">  me -&gt; her</div><div class="line">  </div><div class="line"><span class="comment"># node imcon.js --me</span></div><div class="line">Implications failed:</div><div class="line">  me -&gt; her</div><div class="line">  </div><div class="line"><span class="comment"># node imcon.js --me --her</span></div><div class="line">&#123; _: [], me: <span class="literal">true</span>, her: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'imcon.js'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node imcon.js --him --her</span></div><div class="line">&#123; _: [], him: <span class="literal">true</span>, her: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'imcon.js'</span> &#125;</div></pre></td></tr></table></figure>
<h3 id="可以"><a href="#可以" class="headerlink" title="可以"></a>可以</h3><h3 id="大家在一起吧-option-options"><a href="#大家在一起吧-option-options" class="headerlink" title="大家在一起吧 :) .option .options"></a>大家在一起吧 :) <code>.option</code> <code>.options</code></h3><p>其实就是将上面的的所有的命令合并成一个 object，里面的 <code>key</code> 就是对应的函数名，而值就是参数。只不过 <code>.options</code> 是很多 <code>.option</code> 的集合。</p>
<p>这个就请看官网的<a href="http://yargs.js.org/docs/#methods-optionskey-opt" target="_blank" rel="external">例子</a>和<a href="https://github.com/yargs/yargs/blob/master/yargs.js#L176" target="_blank" rel="external">源码</a></p>
<h4 id="有用但是很简单其余参数"><a href="#有用但是很简单其余参数" class="headerlink" title="有用但是很简单其余参数"></a>有用但是很简单其余参数</h4><ul>
<li><code>.default</code> <code>.defaults</code> 设置默认参数值</li>
<li><code>.describe</code> 对参数的描述</li>
<li><code>.usage</code> 设置命令的提示的使用方法</li>
<li><code>.help</code> 设置帮助的指令，添加 <code>--help</code> ，但是没有 <code>-h</code> ，需要手动添加，可以选择是否添加 <code>help</code> 子命令</li>
<li><code>.group</code> 分组，比如可以设置启动参数为一组，停止参数为一组，只是看起来比较舒服一些，并不影响什么内容。</li>
<li><code>.normalize</code> 对参数的值用 <code>path.normalize</code> </li>
<li><code>.version</code> 添加版本显示参数 <code>--version</code>，不过不添加缩写参数</li>
<li><code>.wrap</code> 设置信息输出的最大的列宽度，比如说 <code>--help</code> 显示帮助参数。<code>.wrap(null)</code> 取消列宽限制，<code>.wrap(require(&#39;yargs&#39;).terminalWidth())</code> 设置为当前宽度。默认是 <code>Math.min(80, windowWidth</code></li>
</ul>
<h3 id="小弟来了-command"><a href="#小弟来了-command" class="headerlink" title="小弟来了 (-_-) .command"></a>小弟来了 (-_-) <code>.command</code></h3><p>最简单的就是想实现类似 git 的那样的带有子命令的命令行操作，那么就需要这个东西。</p>
<p>他有如下的参数：</p>
<ul>
<li><code>.command(cmd, desc, [builder], [handler])</code></li>
<li><code>.command(cmd, desc, [module])</code></li>
<li><code>.command(module)</code></li>
<li><code>builder</code> 是构造器，可以是 <code>Object|yargs =&gt; {}</code>，如果是对象，那么和 <code>.options</code> 是一样的。如果是函数，参数是 <code>yargs</code> 可以通过上面的函数添加参数。</li>
<li><code>handler</code> 是处理器，当解析完成后，传入解析的结果，此时可以对结果进行处理。</li>
<li><code>module</code> 最简单了，就是有<ul>
<li><code>command</code> 命令名</li>
<li><code>aliases</code> 别名</li>
<li><code>describe</code> 描述</li>
<li><code>builder</code> 构造器</li>
<li><code>handler</code> 处理器</li>
</ul>
</li>
</ul>
<p>当匹配到一个命令的时候， <code>yargs</code> 会做如下处理：</p>
<ol>
<li>把当前命令输入到当前作用域中</li>
<li>清空所有的非全局的配置</li>
<li>如果传入了 <code>builder</code>，就通过其设置当前命令</li>
<li>解析和验证参数</li>
<li>如何一切正常，那么运行 <code>handle</code>，如果传入了的话</li>
<li>从当前作用域中弹出</li>
</ol>
<h4 id="这个位置是你的，别人抢不走-arg1-lt-arg2-gt"><a href="#这个位置是你的，别人抢不走-arg1-lt-arg2-gt" class="headerlink" title="这个位置是你的，别人抢不走 [arg1] &lt;arg2&gt;"></a>这个位置是你的，别人抢不走 <code>[arg1] &lt;arg2&gt;</code></h4><p>有的时候希望命令必须要接受一个参数，或者接受一个可选参数，那么可以对命令使用 <code>&lt;&gt;</code> 和 <code>[]</code> 设置他的位置。<code>&lt;&gt;</code> 表示这个命令必须要有，<code>[]</code> 表示这个参数可选。</p>
<p>有如下规则：</p>
<ul>
<li>通过 <code>|</code> 设置别名，例如 <code>[name|username]</code> ，在最后的解析中，<code>name</code> 和 <code>username</code> 是一样的。</li>
<li>最后一个可选参数支持添加 <code>…</code> 变成可变参数，例如 <code>downloadto &lt;from&gt; [to…]</code> 那么 <code>to</code> 是一个数组，并且必须要是命令中的最后一个可选参数才能变成可变参数。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// like.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>)</div><div class="line">	.command(<span class="string">'like &lt;who&gt;'</span>, <span class="string">'you like who'</span>, &#123;&#125;, arg =&gt; <span class="built_in">console</span>.dir(arg))</div><div class="line">	.command(<span class="string">'dislike [who]'</span>, <span class="string">'you dislike who'</span>, &#123;&#125;, arg =&gt; <span class="built_in">console</span>.dir(arg))</div><div class="line">	.argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node like.js like you</span></div><div class="line">&#123; _: [ <span class="string">'like'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span>, who: <span class="string">'you'</span> &#125;</div><div class="line">&#123; _: [ <span class="string">'like'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span>, who: <span class="string">'you'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node like.js like</span></div><div class="line">like.js like &lt;who&gt;</div><div class="line"></div><div class="line">Not enough non-option arguments: got 0, need at least 1</div><div class="line"></div><div class="line"><span class="comment"># node like.js dislike</span></div><div class="line">&#123; _: [ <span class="string">'dislike'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span> &#125;</div><div class="line">&#123; _: [ <span class="string">'dislike'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span> &#125;</div><div class="line"></div><div class="line"><span class="comment"># node like.js dislike you</span></div><div class="line">&#123; _: [ <span class="string">'dislike'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span>, who: <span class="string">'you'</span> &#125;</div><div class="line">&#123; _: [ <span class="string">'dislike'</span> ], <span class="string">'$0'</span>: <span class="string">'like.js'</span>, who: <span class="string">'you'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="默认命令"><a href="#默认命令" class="headerlink" title="默认命令 *"></a>默认命令 <code>*</code></h4><p>有的时候当没有任何命令匹配到的时候，希望有一个默认匹配的，那么可以用 <code>*</code> 代替普通命令的位置。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// defaultCommand.js</span></div><div class="line"><span class="keyword">const</span> argv = <span class="built_in">require</span>(<span class="string">'yargs'</span>)</div><div class="line">	.command(<span class="string">'*'</span>, <span class="string">'default command'</span>, &#123;&#125;, () =&gt; <span class="built_in">console</span>.log(<span class="string">'called command'</span>))</div><div class="line">	.argv</div><div class="line"><span class="built_in">console</span>.dir(argv)</div></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># node defaultCommand.js --name</span></div><div class="line">called <span class="built_in">command</span></div><div class="line">&#123; _: [], name: <span class="literal">true</span>, <span class="string">'$0'</span>: <span class="string">'defaultCommand.js'</span> &#125;</div></pre></td></tr></table></figure>
<h4 id="方便一点-commandDir"><a href="#方便一点-commandDir" class="headerlink" title="方便一点 .commandDir"></a>方便一点 <code>.commandDir</code></h4><p>表示直接从文件夹中动态加载命令。详情请参考<a href="http://yargs.js.org/docs/#methods-commanddirdirectory-opts" target="_blank" rel="external">文档</a></p>
<h3 id="从别的地方来-config-env-coerce"><a href="#从别的地方来-config-env-coerce" class="headerlink" title="从别的地方来 .config .env .coerce"></a>从别的地方来 <code>.config</code> <code>.env</code> <code>.coerce</code></h3><p>写到这里，作者累了，所以：</p>
<ul>
<li><code>.config</code> 动态的从命令行中接受一个 <code>json</code> 文件路径，并自动加载。 <a href="http://yargs.js.org/docs/#methods-configobject" target="_blank" rel="external">doc</a> </li>
<li><code>.env</code> 设置环境变量的前缀，自动将这些前缀的环境变量去掉前缀，使用小驼峰和下划线方式加载。<a href="http://yargs.js.org/docs/#methods-envprefix" target="_blank" rel="external">doc</a></li>
<li><code>.coerce</code> 获取到变量值之后转化成别的值。<a href="http://yargs.js.org/docs/#methods-coercekey-fn" target="_blank" rel="external">doc</a></li>
</ul>
<p>还有很多细节的，不过我觉得文档挺详细的，我就不多说了。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>感觉还是不错的，接口很简单，也通俗易懂。相比 <code>commander</code> 是两种不同的风格。<code>commander</code> 上手简单，但是前置知识有一些，而 <code>yargs</code> 相比前置知识的要求比较少，而且更加灵活。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/05/03/cli-build-tools-for-yargs/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/02/06/how-to-live-in-macos/">
                            如何在 Macos 系统中开启直播~适用于支持 RTMP 协议的直播
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Mon Feb 06 2017 23:22:10 GMT+0800">
	
		    2月 06, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Mac/">Mac</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <h1 id="table-of-contents">目录</h1><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#前言"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#工具"><span class="toc-text">工具</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#直播过程详解"><span class="toc-text">直播过程详解</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#直播源与-OBS"><span class="toc-text">直播源与 OBS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#OBS"><span class="toc-text">OBS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#下载-安装（自行解决）"><span class="toc-text">下载/安装（自行解决）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#概念"><span class="toc-text">概念</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#场景-amp-来源"><span class="toc-text">场景 & 来源</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#混音器"><span class="toc-text">混音器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#直播源"><span class="toc-text">直播源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#音频"><span class="toc-text">音频</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Step-1：-Install-iShowU-Audio-Capture"><span class="toc-text">Step 1： Install iShowU Audio Capture</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Step-2：Setup-Multi-Output-Device"><span class="toc-text">Step 2：Setup Multi-Output Device</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Step-3：-Switch-to-New-Output"><span class="toc-text">Step 3： Switch to New Output</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Step-4：Set-New-Audio-Input-In-OBS"><span class="toc-text">Step 4：Set New Audio Input In OBS</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#BUG"><span class="toc-text">BUG</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#编码-转化-压缩-配置"><span class="toc-text">编码/转化/压缩 配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RTMP-协议传送数据"><span class="toc-text">RTMP 协议传送数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#观看"><span class="toc-text">观看</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#总结"><span class="toc-text">总结</span></a></li></ol>
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>随着现在互联网的发展，直播行业也是越来越火了，但是有一个现象就是大部分的直播客户端都是面向的 Window 系统，大部分的教程也是针对 Window 的，但我是一枚 Macer，所以我再这里将我使用 Macos 开启直播中重要的一些事情记录一下。</p>
<h1 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h1><ul>
<li><a href="https://obsproject.com/" target="_blank" rel="external">OBS</a></li>
<li><a href="https://support.shinywhitebox.com/hc/en-us/articles/204161459-Installing-iShowU-Audio-Capture" target="_blank" rel="external">iShowU Audio Capture</a></li>
<li>Audio MIDI Setup (Macos Buildin)</li>
</ul>
<h1 id="直播过程详解"><a href="#直播过程详解" class="headerlink" title="直播过程详解"></a>直播过程详解</h1><p>首先如果我们想要直播，那么首先要搞清楚直播的整个流程：</p>
<ol>
<li>在不同的直播平台开启直播，然后获取 RTMP 地址和密钥</li>
<li>将 RTMP 地址和密钥填写到 OBS 的串流配置中</li>
<li>配置 OBS 直播界面，比如录制整个屏幕，录制某个应用程序，录制一个区域，添加字幕，添加本地影片等等内容</li>
<li>在 OBS 中开启直播，整个直播就开始了，其他人就可以在直播平台看到你的直播内容了</li>
</ol>
<p>也就是说整个直播流的流动是这样的：</p>
<p><code>直播源</code> -&gt; <code>OBS 录制</code> -&gt; <code>编码/转换/压缩</code> -&gt; <code>通过 RTMP 协议将数据发送到直播平台</code> -&gt; <code>用户打开直播平台</code> -&gt; <code>获取数据</code> -&gt; <code>直播播放</code></p>
<p>那么我们就针对整个直播流进行说明：</p>
<h2 id="直播源与-OBS"><a href="#直播源与-OBS" class="headerlink" title="直播源与 OBS"></a>直播源与 OBS</h2><p>由于这两部分可以在一起讲解，我们主要是讲解 OBS。</p>
<h3 id="OBS"><a href="#OBS" class="headerlink" title="OBS"></a>OBS</h3><p>官网是这样描述这个软件的：</p>
<blockquote>
<p>Open Broadcaster Software. Free and open source software for video recording and live streaming.</p>
</blockquote>
<p>所以这款软件主要是面向的是视频录制和直播流，但是我不得不说用这个软件还是直播用的多。视频录制简单来说就是类似于 B 站的游戏视频似得，或者相关的视频教程。不过不得不说，如果是游戏录制的话，还是使用 navida 自带的视频录制好一些，那个对性能的影响不是很高。这个 obs 真占用 CPU &gt;__&gt;（后面会有相应的测试）。</p>
<h3 id="下载-安装（自行解决）"><a href="#下载-安装（自行解决）" class="headerlink" title="下载/安装（自行解决）"></a>下载/安装（自行解决）</h3><p>在官网一个硕大的 Download，请自行点击，并选择合适的版本下载。</p>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><h4 id="场景-amp-来源"><a href="#场景-amp-来源" class="headerlink" title="场景 &amp; 来源"></a>场景 &amp; 来源</h4><p>如果是学过导播的同学，或许对这个并不陌生。那么我简单来说，用电视台举个例子，一个场景对应的是一个电视台的画面，而一个来源对应的电视台中的一个图层。比如说山东卫视是一个场景，但是山东卫视画面当中的台标是一个来源，电视剧画面是一个来源，底部滚动信息是一个来源，右下角广告是一个来源，这些来源共同组成了这个场景，也就是山东卫视的画面。</p>
<h4 id="混音器"><a href="#混音器" class="headerlink" title="混音器"></a>混音器</h4><p>主要是针对输出的音频进行合成的</p>
<h3 id="直播源"><a href="#直播源" class="headerlink" title="直播源"></a>直播源</h3><p>在 obs 启动之后，默认只有一个场景，但是场景里面是空的，那么我们需要添加自己需要录制或直播的内容：</p>
<p>在下方的<code>来源</code>中的右下角有一个加号，点击之后会有一个菜单让我们选择添加什么样的来源，有如下：</p>
<ul>
<li>图像 添加一个图像，类似于电视台添加台标</li>
<li>图像幻灯片放映 添加图像幻灯片，不多解释</li>
<li>场景 可以在一个场景中嵌入另一个场景的内容，类似在山东卫视里面播放了浙江卫视的内容</li>
<li>媒体源 添加一个媒体，一般是视频</li>
<li>文本 添加文字</li>
<li>显示捕获 捕获屏幕</li>
<li>窗口捕获 捕获一个窗口的内容</li>
<li>游戏录制(Syphon) 相当于窗口捕获，不过他是利用 Syphon 直接从 GPU 中获取画面，而且没有窗口边框的，这点对于游戏直播来说还是不错的。</li>
<li>BrowserSource 嵌入一个网页</li>
</ul>
<p>上面就是平时用到的一些内容，具体操作我就不讲解了，不同的来源有不同的配置内容，不过整体相对来说还是简单的，如果有需要的话，大家可以留言，我再详细讲解一下，当然还有音频的来源，这个我们后面再讲。</p>
<h3 id="音频"><a href="#音频" class="headerlink" title="音频"></a>音频</h3><p>在解决了画面的问题之后，那么我们剩下的问题就剩下音频了。大家或许想了，添加音频不是很简单的事情么，有啥复杂的。不过我想说的是，在 Window 上面或许确实简单，但是在 Macos 上面，由于 Apple 在 OSX10.11 加入的新的安全机制，导致无法正常的获取系统声音，麦克风的声音还是可以正常获取的。也就是说无法录制游戏内部的声音，但是可以录制你说话的声音。那么如果是 Linux 思维用户的话，那么就会直接把 SIP 关掉，哈哈哈。简单就是智慧，复杂就是愚蠢，😂</p>
<p>不过对于不想关闭的用户来说，还是有办法的。那么我们可以换个思路来思考，我们可以将音频输出到一个虚拟的输出设备，然后这个设备再虚拟成输入设备，在 OBS 从这个虚拟的输入设备中获取输入，就可以成功解决无法录制系统音频的问题了。</p>
<p>不过也有人问了，那这样的话，我不就听不到声音了么？？？解决办法就是：用另一台设备打开自己的直播网站，播放自己的直播视频，然后放在旁边，只不过可能会有几十秒的延迟而已 ^_^</p>
<p>不闹了，其实是用到了 Mac 自带的 <code>Audio MIDI Setup</code> ，需要这个软件先虚拟一个多输出设备，然后将音频输出到这个多输出设备上，然后由多输出设备将输出一部分送到扬声器，另一部分送到虚拟的输出设备，剩下的照常。</p>
<p>这样我们就解决了因为系统权限问题而无法获取系统声音的问题。</p>
<p>具体数据流见如下图：</p>
<img src="/2017/02/06/how-to-live-in-macos/audio_source_flow.png" alt="audio_source_flow.png" title="">
<h4 id="Step-1：-Install-iShowU-Audio-Capture"><a href="#Step-1：-Install-iShowU-Audio-Capture" class="headerlink" title="Step 1： Install iShowU Audio Capture"></a>Step 1： Install iShowU Audio Capture</h4><p>首先解释一下 <code>iShowU Audio Capture</code> 是干什么用的，其实主要作用就是生成一个虚拟的输入输出设备。在这里，有很多的替代品，不过我觉得这个是比较纯粹的一个，只有这一个功能。</p>
<p>首先这里<a href="#工具">工具</a>有官网链接，下载后安装即可。然后打开系统偏好设置 -&gt; 声音，选择输出选项卡，会有一个叫做 <code>iShowU Audio Capure</code> 的选项，并且切换到输入选项卡，也可以看到一个叫做 <code>iShowU Audio Capture</code> 的选项，那么说明你已经安装成功了。</p>
<h4 id="Step-2：Setup-Multi-Output-Device"><a href="#Step-2：Setup-Multi-Output-Device" class="headerlink" title="Step 2：Setup Multi-Output Device"></a>Step 2：Setup Multi-Output Device</h4><p>打开 <code>Audio MIDI Setup</code> ，点击左下角的加号，选择创建多输出设备，分别在 <code>iShowU Audio Capture</code> 和 <code>Built-in Output</code> 前面勾选使用。</p>
<h4 id="Step-3：-Switch-to-New-Output"><a href="#Step-3：-Switch-to-New-Output" class="headerlink" title="Step 3： Switch to New Output"></a>Step 3： Switch to New Output</h4><p>打开系统偏好设置 -&gt; 声音 -&gt; 输出选项卡，选择我们刚刚添加的多输出设备，将输出定向到这个新的多输出设备上。</p>
<h4 id="Step-4：Set-New-Audio-Input-In-OBS"><a href="#Step-4：Set-New-Audio-Input-In-OBS" class="headerlink" title="Step 4：Set New Audio Input In OBS"></a>Step 4：Set New Audio Input In OBS</h4><p>打开 OBS，选择添加音频输入来源，选择我们刚刚添加的 <code>iShowU Audio Capture</code> 即可。</p>
<p>下面我们可以进行一下测试，打开一个音乐播放，可以在混音器中看到有音频信号传入，并且扬声器中也有声音发出，那么说明你已经成功了！！！</p>
<p>赶紧打开一瓶饮料庆祝一下吧，不过且慢。🐛来了</p>
<h4 id="BUG"><a href="#BUG" class="headerlink" title="BUG"></a>BUG</h4><p>此时如果你带着耳机你会发现麦克风不管用了，麦克风传入的信号也是系统声音，这是什么原因呢？不知。。。不过这里有一个解决方案。</p>
<p>创建一个输入聚合设备，跟创建多输出设备类似，不过这次我们选择创建聚合设备(aggregate device)，在 <code>Built-in Microphone</code> 和 <code>iShowU Audio Capture</code>  前面选中使用即可。然后再试一下，发现这个 BUG 是不是就解决了。如果还是不行，请在下方留言。</p>
<h2 id="编码-转化-压缩-配置"><a href="#编码-转化-压缩-配置" class="headerlink" title="编码/转化/压缩 配置"></a>编码/转化/压缩 配置</h2><p>这里主要说一下推荐的配置，针对 Macbook Pro 来说，建议使用 1280*800 的配置，码率选择 2000Kbps，帧速率 30 即可，这个配置下面可以达到较高的画质，而且 CPU 占用也不是很高。</p>
<h2 id="RTMP-协议传送数据"><a href="#RTMP-协议传送数据" class="headerlink" title="RTMP 协议传送数据"></a>RTMP 协议传送数据</h2><p>在这里我就不详细解释 RTMP 了，也不解释 RTMP 和 HLS 的区别和联系了，这个大家可以自行 Google。</p>
<p>OBS 配置 RTMP 的位置是在设置 -&gt; 串流里面，填写入地址和密钥即可。</p>
<p>保存之后，点击开始串流就可以进行直播了。</p>
<h2 id="观看"><a href="#观看" class="headerlink" title="观看"></a>观看</h2><p>这里顺便打个广告，我的 <a href="https://live.bilibili.com/3388074" target="_blank" rel="external">B 站直播间</a>，主要是直播 Minecraft 和 Dota，纯属娱乐直播，没有什么意义。有时候可能还是直播 Coding。</p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>这篇文章算不上什么教程，也没有什么通俗易懂的图片之类的，因为大部分的内容都可以 Google 到，我这里只是针对一些可能出现问题的地方记录了一下，方便大家。</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/02/06/how-to-live-in-macos/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    
    <article class="postShorten postShorten--thumbnailimg-bottom" itemscope itemType="http://schema.org/BlogPosting">
        <div class="postShorten-wrap">
            <div class="postShorten-header">
                <h1 class="postShorten-title" itemprop="headline">
                    
                        <a class="link-unstyled" href="/2017/01/18/first-try-v2ray-and-bbr/">
                            第一次尝试 V2ray 和 Bbr 用于翻墙（非教程）
                        </a>
                    
                </h1>
                <div class="postShorten-meta">
    <time itemprop="datePublished" content="Wed Jan 18 2017 11:15:32 GMT+0800">
	
		    1月 18, 2017
    	
    </time>
    
        <span>发布在 </span>
        
    <a class="category-link" href="/categories/Linux/">Linux</a>


    
</div>
            </div>
            
            
                <div class="postShorten-content" itemprop="articleBody">
                    <p>​    2017年到了，我也放假了，正好在这个时间看到了一个叫做 v2ray 的代理软件，发现他非常符合我的需求，至少他有一下几个优点：</p>
<ul>
<li>支持多入多出，也就是可以同时监听多个接口，接收代理请求，然后通过多个输出端口进行代理。</li>
<li>既然支持多入多出，不支持多协议怎么可以呢？他支持 ss，socks，vmess 等协议</li>
<li>用 golang 写得，效率不会太低（我是说在相同算法和功能上，不是指他协议的加密传输算法）</li>
<li>社区比较活跃，我喜欢</li>
</ul>
<p>鉴于上面的优点，我去研究了一下这个 v2ray，发现安装起来还是很简单的么。</p>
<p>具体安装方式，请参考 <a href="https://www.v2ray.com/chapter_01/install.html" target="_blank" rel="external">v2ray install</a> ，配置什么的我就不多说什么了，官网上面讲的很清楚。如果有什么问题，欢迎提交 issue 或者进入 telegram group 讨论，作者在里面还是很积极的。</p>
<p>不过现在 v2ray 总体来说对新手还不是很友好，期待以后的改进。而且暂时还没有 gui 管理界面，期待作者的添加。</p>
<p>说完了 v2ray，就不得不说 v2ray 相关的 tcp-bbr，谷歌大大提交的 tcp 拥塞解决算法，现在已经合并到 linux4.9 内核当中，听说对于高延迟长连接的线路有很大的优化作用，那么对于翻墙来说，这可是神器，怎么能不使用一下呢。</p>
<p>关于 bbr 的介绍，可以看这篇<a href="https://www.zhihu.com/question/53559433" target="_blank" rel="external">知乎的文章</a></p>
<p>那么我就在我的 linode 服务器上开启一下，不过需要注意的是，不要使用 linode dashboard 中的 linux4.9 内核，因为那个内核是被 linode 修改过的，会无法开启 bbr，我们需要手动安装 linux4.9 内核。</p>
<p><a href="https://blog.linuxeye.com/452.html" target="_blank" rel="external">安装教程</a></p>
<p>是不是很期待呀，下面就是测试</p>
<p>未开启 bbr</p>
<img src="/2017/01/18/first-try-v2ray-and-bbr/without_bbr.png" alt="without_bbr.png" title="">
<p>开启 bbr</p>
<img src="/2017/01/18/first-try-v2ray-and-bbr/bbr.png" alt="bbr.png" title="">
<p>可能由于家里的带宽的原因，提升速度太不明显了2333，等以后有空回学校重新测试一下。</p>
<p>不过我不能确定是不是我的服务器网络质量太好了，导致加速不明显 2333</p>

                    
                        

                    
                    
                        <p>
                            <a href="/2017/01/18/first-try-v2ray-and-bbr/#post-footer" class="postShorten-excerpt_link link">
                                注释和共享
                            </a>
                        </p>
                    
                </div>
            
        </div>
        
    </article>
    
    <div class="pagination-bar">
    <ul class="pagination">
        
        
        <li class="pagination-number">第 1 页 共 1 页</li>
    </ul>
</div>

</section>



                <footer id="footer" class="main-content-wrap">
    <span class="copyrights">
        Copyrights &copy; 2018 XGHeaven. All Rights Reserved.
    </span>
</footer>

            </div>
            
        </div>
        


    

<div id="about">
    <div id="about-card">
        <div id="about-btn-close">
            <i class="fa fa-remove"></i>
        </div>
        
            <img id="about-card-picture" src="https://www.gravatar.com/avatar/f34474afe04544ffbe944a804f0ae762?s=110"/>
        
            <h4 id="about-card-name">XGHeaven</h4>
        
            <h5 id="about-card-bio"><p>一个弱弱的码农</p>
</h5>
        
        
            <h5 id="about-card-job">
                <i class="fa fa-briefcase"></i>
                <br/>
                <p>杭州电子科技大学学生一枚</p>

            </h5>
        
        
            <h5 id="about-card-location">
                <i class="fa fa-map-marker"></i>
                <br/>
                Weifang Shandong, China
            </h5>
        
    </div>
</div>

        
<div id="cover" style="background-image:url('/static/images/20170217-TombRaider.jpg');"></div>
    </body>
    <!--SCRIPTS-->
<script src="/assets/js/scrip-z6xcdnzggiy56kzp83ux5nnbwra1acrauxruz3kdi3u5xladb6jh4n3ylebm.min.js"></script>
<!--SCRIPTS END-->



</html>
